<template>
	<view>
		<u-empty v-if="messageList.length===0" mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png">
		</u-empty>
    
    <!-- 消息列表 -->
    <view class="card" v-for="(item ,index) in messageList" :key="index" @click.native="messageDetail(item.id)">
		<view class="card-left">
			<view class="backLogo" v-if="item.type===3">
				<view class="message-dot" v-if="item.state===0">
					
				</view>
				<u-icon name="bell-fill" color="white" size="30px" ></u-icon>
			</view>
			<view class="backLogo" style="background-color: #BABED7;" v-if="item.type===5">
				<view class="message-dot" v-if="item.state===0">
					
				</view>
				<u-icon name="volume-fill" color="white" size="30px" ></u-icon>
			</view>
		</view>
      <view class="card-right">
		  <view class="res-time">
		  	 <view class="res" v-if="item.type===3">
		  	 	证书审核结果
		  	 </view>
			 <view class="res"  v-if="item.type===5">
			 	活动参加提醒
			 </view>
			 <view class="time">
			 	{{item.time}}
			 </view>
		  </view>
		  
		<view class="check-res">
			{{item.description}}
		</view>
      </view>  
        <!-- <text class='card-read arrow'>查看详情</text> -->
    </view>
        <view class="not-more" v-show="show3">已经到底了~~</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['noCheckMsgNum']),
			...mapState(['msgList'])
		},
		mounted() {
			// this.setMsgTip()
			this.getMessages();
		},
		onLoad() {
			this.hideIcon()
			this.setMsgTip()
		},
		onReachBottom() {
			// console.log("到底了",this.currentPage)
			this.currentPage++
			this.addMessage()
		},
		onPullDownRefresh() {
			this.currentPage = 1
			this.messageList = this.msgList
			this.show3 = false
		},
		data() {
			return {
				currentPage: 1,
				show: true,
				show2: false,
				show3: false,
				messageList: [],

			}
		},

    methods:{
      ...mapMutations(['updateMessage']),
      // 设置消息提醒
      // setMsgTip(){
      //   console.log("执行力",this.noCheckMsgNum)
      //   wx.setTabBarBadge({
      //         index:1,
      //         text:''+this.noCheckMsgNum
      //       })
      // },
      
      // async getTotal(){
      //   var sum=0;
      //   for(var i = 0; i<this.msgList.length;i++){
      //     if(this.msgList[i].state===0){
      //       sum++;
      //     }
      //   }
      //   this.notCheckMsg=sum;
      //   console.log("未读消息数量"+sum)
      //   wx.setTabBarBadge({
      //         index:1,
      //         text:''+this.notCheckMsg
      //       })
      // },
      
      // async addMessage(){
      //    const user = uni.getStorageSync("user");
      //   uni.request({
      //     url:`${this.$baseUrl}/message/userMsg/${this.currentPage}/${user.id}`,
      //     method:"GET",
      //     success:(res)=>{
      //        console.log(res)
      //       // if(res.data.status){
      //         this.messageList=[...this.messageList,...res.data.data.records]
      //         //根据记录判断数据是否已经查询完成
      //         if(res.data.data.records.length<10){
      //           this.show3=true;
      //         }
              
      //       // }
      //     },
      //   })
      // },
      
      async getMessages(){
        this.messageList=this.msgList
      },
      
      // async messageDetail(id){
      //   console.log("去消息详情页面"+id)
      //   this.updateMessage(id)
      //   this.setMsgTip()
      //   uni.navigateTo({
      //     url:'/pages/msgDetail/msgDetail?id='+id,
      //   })
        
      // },
      
      async hideIcon(){
        if(this.noCheckMsgNum>0){
          this.show=false
        }
      },
      // 设置消息提醒
      setMsgTip(){
        wx.setTabBarBadge({
              index:1,
              text:''+this.noCheckMsgNum
            })
      }
      
    },
		methods: {
			...mapMutations(['updateMessage']),
			// 设置消息提醒
			// setMsgTip(){
			//   console.log("执行力",this.noCheckMsgNum)
			//   wx.setTabBarBadge({
			//         index:1,
			//         text:''+this.noCheckMsgNum
			//       })
			// },

			// async getTotal(){
			//   var sum=0;
			//   for(var i = 0; i<this.msgList.length;i++){
			//     if(this.msgList[i].state===0){
			//       sum++;
			//     }
			//   }
			//   this.notCheckMsg=sum;
			//   console.log("未读消息数量"+sum)
			//   wx.setTabBarBadge({
			//         index:1,
			//         text:''+this.notCheckMsg
			//       })
			// },

			async addMessage() {
         const user = uni.getStorageSync("user");
				uni.request({
					url: `${this.$baseUrl}/message/userMsg/${this.currentPage}/${user.id}`,
					method: "GET",
					success: (res) => {
						console.log(res)
						// if(res.data.status){
						this.messageList = [...this.messageList, ...res.data.data.records]
						//根据记录判断数据是否已经查询完成
						if (res.data.data.records.length < 10) {
							this.show3 = true;
						}

						// }
					},
				})
			},

			async getMessages() {
				this.messageList = this.msgList
			},

			async messageDetail(id) {
				console.log("去消息详情页面"+id)
				this.updateMessage(id)
				this.setMsgTip()
				uni.navigateTo({
					url: '/pages/msgDetail/msgDetail?id=' + id,
				})

			},

			async hideIcon() {
				if (this.noCheckMsgNum > 0) {
					this.show = false
				}
			},
			// 设置消息提醒
			setMsgTip() {
				wx.setTabBarBadge({
					index: 1,
					text: '' + this.noCheckMsgNum
				})
			}

		}
	}
</script>

<style lang="scss">
	.not-more {
		text-align: center;
		font-size: 30rpx;
	}

	.card {
		background-color: #fff;
		border-bottom: 1rpx solid #ddd;
		width: 686rpx;
		height: 160rpx;
		margin-left: 32rpx;
		display: flex;
		//flex-direction: column;
		align-items: center;
		.card-left {
			
		}
		.card-right {
			margin-left: 16rpx;
			.res-time {
				display: flex;
				justify-content: space-between;
				.res {
					font-size: 32rpx;
					width: 192rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-weight: 600;
					color: rgba(51, 51, 51, 1);
				}
				.time {
					font-size: 24rpx;
					font-weight: 400;
					width: 252rpx;
					height: 34rpx;
					margin-left: 114rpx;
					color: rgba(153, 153, 153, 1);
				}
			}
			.check-res {
				font-size: 28rpx;
				font-weight: 400;
				margin-top: 8rpx;
				color: rgba(102, 102, 102, 1);
			}
		}
	}

	
	
	.backLogo {
		position: relative;
		border-radius: 50%;
		background: #F3B568;
		width: 112rpx;
		height: 112rpx;	
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.message-dot {
		position: absolute;
		top: 2rpx;
		left: 80rpx;
		width: 24rpx;
		height: 24rpx;
		border-radius: 100%;
		background-color: #EB1E1E;
	}
	
</style>
